<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
<script src="js/bootstrap.min.js" charset="UTF-8"></script>
<script src="js/swiper.min.js" charset="UTF-8"></script>
<script src="js/global.js" charset="UTF-8"></script>
<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
#fenBtn {
	background-color: #555555;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 10px;
}
</style>
<script type="text/javascript">
	$(function() {
		var u=JSON.parse(window.localStorage.getItem("user"));
		console.log(u);
		if (u!=null) {
			$("#yinCang").hide();
			$("#xianShi").show();
			$("#uName").html(u.username);
			$("#uId").html(u.uid);
		}
	})
	// 页面加载完毕查询所有商品
	 $(function(){
		$.post("selBooks",{
			page: 0,
			size: 16
		},function(res){
			for (var i = 0; i < res.length; i++) {
				$("#alei").append(`
						<div class="item-card">
							<a href="item_show.html?id=${res[i].id}&categoryId=${res[i].categoryId}" class="photo"> <img
								src="images/${res[i].img}" alt="${res[i].name}"
								class="cover">
								<div class="name">${res[i].name}</div>
							</a>
							<div class="middle">
								<div class="price">
									<small>￥</small>${res[i].sellPrice}
								</div>
							</div>
						</div>		
					`);
			}
		},"json");
	})
	
	// 分页查所有第1页
	function selBooksOne(){
		$("#alei").html("")//清空页面
		$.post("selBooks",{
			page: 0,
			size: 16
		},function(res){
			for (var i = 0; i < res.length; i++) {
				$("#alei").append(`
						<div class="item-card">
							<a href="item_show.html?id=${res[i].id}" class="photo"> <img
								src="images/${res[i].img}" alt="${res[i].name}"
								class="cover">
								<div class="name">${res[i].name}</div>
							</a>
							<div class="middle">
								<div class="price">
									<small>￥</small>${res[i].sellPrice}
								</div>
							</div>
						</div>		
					`);
			}
		},"json");
	}
	
	// 分页查所有第二页
	function selBooksTwo(){
		$("#alei").html("")//清空页面
		$.post("selBooks",{
			page: 16,
			size: 16
		},function(res){
			for (var i = 0; i < res.length; i++) {
				$("#alei").append(`
						<div class="item-card">
							<a href="item_show.html?id=${res[i].id}" class="photo"> <img
								src="images/${res[i].img}" alt="${res[i].name}"
								class="cover">
								<div class="name">${res[i].name}</div>
							</a>
							<div class="middle">
								<div class="price">
									<small>￥</small>${res[i].sellPrice}
								</div>
							</div>
						</div>		
					`);
			}
		},"json");
	}
	
	// 查分类
	$(function(){
		$("#alei").html("")//清空页面
	 	$.post("selBooksByWhereCatrgory",{ 
	 	},function(res){
		 	console.log(res);
			for(var i=0;i<res.length;i++){
					$("#leiXing").append(`
						<option value="${res[i].categoryId}">${res[i].category.c_name}</option>
					`)
			}
		 },"json")
	}) 
	
	// 查品牌
	$(function(){
		$("#alei").html("")//清空页面
	 	$.post("selBooksByWhereBrand",{ 
	 	},function(res){
			console.log(res);
			for(var i=0;i<res.length;i++){
				$("#pinPai").append(`
					<option value="${res[i].brand}">${res[i].brand}</option>
				`)
			} 
		 },"json")
	})
	
	// 点击事件
	function queDing(){
		$("#alei").html("")//清空页面
		$.post("selBooksByWhere",{
			brand: $("#pinPai").val(),
			categoryId: $("#leiXing").val(),
			beginPrice: $("#beginPrice").val(),
			endPrice: $("#endPrice").val(),
			page: 0,
			size: 16
		},function(res){
			console.log(res);
			for(var i=0;i<res.length;i++){
				$("#alei").append(`
						<div class="item-card">
							<a href="item_show.html?id=${res[i].id}" class="photo"> <img
								src="images/${res[i].img}" alt="${res[i].name}"
								class="cover">
								<div class="name">${res[i].name}</div>
							</a>
							<div class="middle">
								<div class="price">
									<small>￥</small>${res[i].sellPrice}
								</div>
							</div>
						</div>		
					`);
			}
		},"json")
	}
	
	// 分页多条件查第1页
	function selBooksOne(){
		$("#alei").html("")//清空页面
		$.post("selBooksByWhere",{
			brand: $("#pinPai").val(),
			categoryId: $("#leiXing").val(),
			beginPrice: $("#beginPrice").val(),
			endPrice: $("#endPrice").val(),
			page: 0,
			size: 16
		},function(res){
			console.log(res);
			for(var i=0;i<res.length;i++){
				$("#alei").append(`
						<div class="item-card">
							<a href="item_show.html?id=${res[i].id}" class="photo"> <img
								src="images/${res[i].img}" alt="${res[i].name}"
								class="cover">
								<div class="name">${res[i].name}</div>
							</a>
							<div class="middle">
								<div class="price">
									<small>￥</small>${res[i].sellPrice}
								</div>
							</div>
						</div>		
					`);
			}
		},"json")
	}
	
	// 分页多条件查第二页
	function selBooksTwo(){
		$("#alei").html("")//清空页面
		$.post("selBooksByWhere",{
			brand: $("#pinPai").val(),
			categoryId: $("#leiXing").val(),
			beginPrice: $("#beginPrice").val(),
			endPrice: $("#endPrice").val(),
			page: 16,
			size: 16
		},function(res){
			console.log(res);
			for(var i=0;i<res.length;i++){
				$("#alei").append(`
						<div class="item-card">
							<a href="item_show.html?id=${res[i].id}" class="photo"> <img
								src="images/${res[i].img}" alt="${res[i].name}"
								class="cover">
								<div class="name">${res[i].name}</div>
							</a>
							<div class="middle">
								<div class="price">
									<small>￥</small>${res[i].sellPrice}
								</div>
							</div>
						</div>		
					`);
			}
		},"json")
	}
</script>
<title>广内殿</title>
</head>
<body>
	<!-- 顶部tab -->
	<div class="tab-header">
		<div class="inner">
			<div class="pull-left">
				<div class="pull-left">
					嗨，欢迎来到<span class="cr">广内殿</span>
				</div>
			</div>
			<div class="pull-right">
				<span id="yinCang"> <a href="login.html"><span class="cr">登录</span></a>
					<a href="login2.html">注册</a>
				</span> <span style="display: none;" id="xianShi"> uid:<span
					id="uId"></span> 欢迎:<span id="uName"></span>
				</span> <a href="udai_setting.html">个人中心</a> <a href="udai_order.html">我的订单</a>
			</div>
		</div>
	</div>
	<!-- 搜索栏 -->
	<div class="top-search">
		<div class="inner">
			<a class="logo" href="index.html"><img
				src="images/icons/logo.jpg" alt="广内殿 class="cover"></a>
			<div class="search-box">
				<form class="input-group">
					<input placeholder="Ta们都在搜广内殿" type="text"> <span
						class="input-group-btn">
						<button type="button">
							<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
						</button>
					</span>
				</form>
			</div>
			<div class="cart-box">
				<a href="udai_shopcart.html" class="cart-but"> <i
					class="iconfont icon-shopcart cr fz16"></i> 购物车
				</a>
			</div>
		</div>
	</div>
	<!-- 内页导航栏 -->
	<div class="top-nav bg3">
		<div class="nav-box inner">
			<div class="all-cat">
				<div class="title">
					<i class="iconfont icon-menu"></i> 全部商品
				</div>
			</div>
			<ul class="nva-list">
				<a href="index.html"><li>首页</li></a>
				<a href="item_category.html"><li>爆款推荐</li></a>
			</ul>
		</div>
	</div>
	<div class="content inner">
		<section class="filter-section clearfix">
			<ol class="breadcrumb">
				<li><a href="index.html">首页</a></li>
				<li class="active">商品筛选</li>
			</ol>
			<div class="filter-box">
				<table width="100%" border="0" cellpadding="0" cellspacing="0"
					height="40">
					<tr>
						<td width="120"><label class="layui-form-label">品牌：</label> <select
							name="pinPai" style="width: 80px;" id="pinPai">
								<option value="未选择">未选择</option>
						</select></td>
						<td width="120"><label class="layui-form-label">分类：</label> <select
							name="leiXing" style="width: 120px;" id="leiXing">
								<option value="">未选择</option>
						</select></td>
						<td width="200" id="jiaGeQuJian">价格区间 : <input type="text"
							name="beginPrice" id="beginPrice" value="" autocomplete="off"
							class="layui-input">&nbsp;-&nbsp; <input type="text"
							name="endPrice" id="endPrice" value="" autocomplete="off"
							class="layui-input"> <input id="queDing" type="button"
							class="input_btn fr" onclick="queDing()" name="" value="确定">
					</tr>
				</table>
			</div>
			<div class="sort-box bgf5">
				<div class="sort-text">排序：</div>
				<a href=""><div class="sort-text">
						销量 <i class="iconfont icon-sortDown"></i>
					</div></a> <a href=""><div class="sort-text">
						价格 <i class="iconfont icon-sortUp"></i>
					</div></a>
			</div>
		</section>
		<section class="item-show__div clearfix">
			<div class="pull-left">
				<div class="item-list__area clearfix">
					<!-- 分页追加显示的内容  -->
					<div class="goods">
						<ul id="alei">
					</div>

					<div id="fenYe" class="goods-page"></div>
				</div>
				<div class="page text-right clearfix" style="text-align: center;">
					<input id="fenBtn" onclick="selBooksOne()" type="button" value="1" />
					<input id="fenBtn" type="button" onclick="selBooksTwo()" value="2" />
				</div>
			</div>
			
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div class="right-nav">
		<ul class="r-with-gotop">
			<li class="r-toolbar-item"><a href="udai_welcome.html"
				class="r-item-hd"> <i class="iconfont icon-user" data-badge="0"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">用户中心</span>
					</div>
			</a></li>
			<li class="r-toolbar-item"><a href="udai_shopcart.html"
				class="r-item-hd"> <i class="iconfont icon-cart"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">购物车</span>
					</div>
			</a></li>
			<li class="r-toolbar-item"><a href="udai_collection.html"
				class="r-item-hd"> <i class="iconfont icon-aixin"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">我的收藏</span>
					</div>
			</a></li>
			<li class="r-toolbar-item"><a href="" class="r-item-hd"> <i
					class="iconfont icon-liaotian"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">联系客服</span>
					</div>
			</a></li>
			<li class="r-toolbar-item"><a href="issues.html"
				class="r-item-hd"> <i class="iconfont icon-liuyan"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">留言反馈</span>
					</div>
			</a></li>
			<li class="r-toolbar-item to-top"><i class="iconfont icon-top"></i>
				<div class="r-tip__box">
					<span class="r-tip-text">返回顶部</span>
				</div></li>
		</ul>
		<script>
			$(document).ready(function() {
				$('.to-top').toTop({
					position : false
				})
			});
		</script>
	</div>
	<!-- 底部信息 -->
	<div class="footer">
		<div class="footer-tags">
			<div class="tags-box inner">
				<div class="tag-div">
					<img src="images/icons/footer_1.gif" alt="厂家直供">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_2.gif" alt="一件代发">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_3.gif" alt="美工活动支持">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_4.gif" alt="信誉认证">
				</div>
			</div>
		</div>
		<div class="footer-links inner">
			<dl>
				<dt>U袋网</dt>
				<a href="temp_article/udai_article10.html"><dd>企业简介</dd></a>
				<a href="temp_article/udai_article11.html"><dd>加入U袋</dd></a>
				<a href="temp_article/udai_article12.html"><dd>隐私说明</dd></a>
			</dl>
			<dl>
				<dt>服务中心</dt>
				<a href="temp_article/udai_article1.html"><dd>售后服务</dd></a>
				<a href="temp_article/udai_article2.html"><dd>配送服务</dd></a>
				<a href="temp_article/udai_article3.html"><dd>用户协议</dd></a>
				<a href="temp_article/udai_article4.html"><dd>常见问题</dd></a>
			</dl>
			<dl>
				<dt>新手上路</dt>
				<a href="temp_article/udai_article5.html"><dd>如何成为代理商</dd></a>
				<a href="temp_article/udai_article6.html"><dd>代销商上架教程</dd></a>
				<a href="temp_article/udai_article7.html"><dd>分销商常见问题</dd></a>
				<a href="temp_article/udai_article8.html"><dd>付款账户</dd></a>
			</dl>
		</div>
		<div class="copy-box clearfix">
			<ul class="copy-links">
				<a href="agent_level.html"><li>网店代销</li></a>
				<a href="class_room.html"><li>U袋学堂</li></a>
				<a href="udai_about.html"><li>联系我们</li></a>
				<a href="temp_article/udai_article10.html"><li>企业简介</li></a>
				<a href="temp_article/udai_article5.html"><li>新手上路</li></a>
			</ul>
			<!-- 版权 -->
			<p class="copyright">
				© 2005-2017 U袋网 版权所有，并保留所有权利<br>
				ICP备案证书号：闽ICP备16015525号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市福鼎市南下村小区（锦昌阁）1栋1梯602室&nbsp;&nbsp;&nbsp;&nbsp;Tel:
				18650406668&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 18650406668@qq.com
			</p>
		</div>
	</div>
</body>
</html>